<template>
	<div class="main">
		<div class="moreResultWrap">
			<div class="back">
				<go-back aa='../evaluation/resultDetails'></go-back>
				<!-- <h2 style="text-align: center;">综合测评结111果详情</h2> -->

			</div>
			<div class="reuDelWrap">
				<scroller style="top: 0.8rem;">
					<div class="reuWrap">
						<div class="reuBoxs">
							<div class="reu1">
								<span>推荐专业结果</span>
							</div>
							<div>
								<div class="botBox2 flex-h" v-for="(item,$index) in delData" :key='$index' v-if="$index<3" @click="jumpToMajor(item.major)">
									<span class="sp1"><b></b></span>
									<span class="flex1 sp2">
										<b>{{item?item.major:''}}</b>
										<i>{{item?item.category:''}}</i>
									</span>
									<span class="sp3"><b>{{item?item.score:''}}</b><img src="~/static/iconsvgs/rightsy.png" alt=""></span>
								</div>
							</div>


						</div>
						<div class="lastlistBox">
							<div>
								<div class="botBox2 flex-h" v-for="(item,$index) in delData" :key='$index' v-if="$index>2" @click="jumpToMajor(item.major)">
									<span class="sp1"><b>{{$index+1}}</b></span>
									<span class="flex1 sp2">
										<b>{{item.major?item.major:''}}</b>
										<i>{{item.category?item.category:''}}</i>
									</span>
									<span class="sp3"><b>{{item.score?item.score:''}}</b><img src="~/static/iconsvgs/rightsy.png" alt=""></span>
								</div>
							</div>
						</div>
						<div style="width: 100%;height: 0.8rem;"></div>
					</div>

				</scroller>

			</div>

		</div>

	</div>
</template>
<script>
	import ls from 'store2';
	// import {} from 'vux'
	import {
		format
	} from '~/plugins/filter';
	import goBack from '~/components/goBack'
	import reportList from '~/components/reportList'
	import axios1 from '~/plugins/axios1'
	export default {
		head: {
			title: '生涯测评'
		},
		components: {
			goBack,
			reportList
		},
		data() {
			return {
				delData: []
			}
		},
		created() {
			this.commonJs.gologins();
		},
		mounted: function() {
			this.showZhResultList()
			if(this.commonJs.isTerminal()=='isAndroid'){
			if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
			}
			}
			ls.set('preUrl', '../evaluation/moreResult')
		},
		destroyed() {
			// this.commonJs.xahui('../evaluation/resultDetails')
			window.removeEventListener('popstate', this.fun, false);
		},
		watch: {

		},
		methods: {
			fun() {
				this.$router.replace({
					path: '../evaluation/resultDetails'

				})

			},
			showZhResultList() {
				let ids = ls.get('zhId') * 1;
				axios1.posts('/career/getReportDetails?id=' + ids).then(res => {
					if (res.code === '0') {
						// this.itemDatas = res.data.evaluationVo;
						// let art=[]
						let majordata = res.data.majorScoreVo;
						if (majordata.length > 0) {
							this.delData = majordata
						}


					}
				}).catch(() => {
					this.$vux.toast.text('数据错误');
				})

			},
			jumpToMajor(major) {
				this.$store.commit('changeSendMsg', major);
				this.goto('/professional/catalogList');
			},

			goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				})
			}

		},
		beforeDestroy() {

		}

	}
</script>

<style scoped lang="less">
	.moreResultWrap {
		width: 7.5rem;
		height: 100vh;
		background: #fff;

		.reuDelWrap {
			width: 7.5rem;
			height: auto;

			.reuWrap {
				width: 100%;
				height: auto;
				padding: 0.3rem 0.3rem 0;
				box-sizing: border-box;

				.reuBoxs {
					width: 100%;
					height: auto;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
					border-radius: 0.2rem;
					padding: 0.3rem 0.3rem 0.5rem;
					box-sizing: border-box;

					.reu1 {
						height: 1rem;
						line-height: 1rem;
						text-align: center;

						span {
							font-size: 0.4rem;
							font-weight: bold;
							color: rgba(34, 34, 34, 1);

						}

					}




				}



			}
		}


		.botBox2 {
			margin-top: 0.3rem;
			width: 100%;
			height: 1.5rem;
			border-radius: 0.1rem;
			padding: 0 0.2rem;

			.sp1 {
				width: 1rem;
				height: 1.5rem;
				overflow: hidden;

				b {
					width: 0.6rem;
					height: 0.6rem;
					display: block;
					margin-top: 0.45rem;


				}

				// 					
			}

			.sp2 {
				height: 1.5rem;
				padding: 0.3rem 0rem;
				box-sizing: border-box;

				b,
				i {
					display: block;
					height: 0.45rem;
					line-height: 0.45rem;
				}

				b {
					font-size: 0.3rem;
					font-weight: bold;
					color: rgba(34, 34, 34, 1);

				}

				i {
					// width: 78px;
					font-size: 0.26rem;
					font-weight: bold;
					color: rgba(187, 187, 187, 1);

				}
			}

			.sp3 {
				b {
					font-size: 0.4rem;
					vertical-align: middle;
					font-weight: 600;
					color: rgba(108, 191, 32, 1);
				}

				img {
					width: 0.3rem;
					height: auto;
					vertical-align: middle;
					margin-left: 0.05rem;
				}

			}

		}

		.reuBoxs {
			.botBox2:nth-of-type(1) {
				background: linear-gradient(270deg, rgba(255, 239, 174, 1) 0%, rgba(255, 252, 226, 1) 100%);

				.sp1 {
					b {
						background: url('~/static/iconsvgs/hg1.png') no-repeat;
						background-size: 100% 100%;
					}
				}
			}

			.botBox2:nth-of-type(2) {
				background: linear-gradient(270deg, rgba(236, 244, 252, 1) 0%, rgba(246, 250, 254, 1) 100%);

				.sp1 {
					b {
						background: url('~/static/iconsvgs/hg2.png') no-repeat;
						background-size: 100% 100%;
					}
				}
			}

			.botBox2:nth-of-type(3) {
				background: linear-gradient(270deg, rgba(251, 237, 219, 1) 0%, rgba(253, 248, 241, 1) 100%);

				.sp1 {
					b {
						background: url('~/static/iconsvgs/hg3.png') no-repeat;
						background-size: 100% 100%;
					}
				}
			}
		}

		.lastlistBox {
			.botBox2 {
				border-radius: 0;
				background: none;
				border-bottom: 1px solid #f2f2f2;
				padding: 0 0.3rem;
				box-sizing: border-box;

				.sp1 {
					b {
						border-radius: 50%;
						background: #FAFAFA;
						text-align: center;
						line-height: 0.6rem;
						font-size: 0.34rem;
						font-weight: 600;
						color: rgba(153, 153, 153, 1);

					}
				}
			}
		}
	}
</style>
